<template>
    <div class="Publish">
        <!-- <div class="Publish_header"></div> -->
        <div class="Publish_content">
            <el-tabs v-model="activePage">
                <el-tab-pane label="发布管理" name="1">
                    <div class="pubTitle currentTitle">当前展示<span class="btn">
                            <el-button size="small" type="warning" class="uploadBtn_el_Btn" @click="showAlert">上传内容</el-button>
                        </span></div>
                    <el-row :gutter="20" class="Publish_row">
                        <el-col :span="24" class="Publish_col">
                            <div class="Publish_col_item">
                                <div class="pubVideo pubFrame">
                                    <el-col :span="12">
                                        <div class="imgTitle">展示屏1</div>
                                        <img src="../../assets/imgs/prop.jpg" alt="" v-show="wallType=='image'">
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="imgTitle">展示屏2</div>
                                        <img src="../../assets/imgs/prop.jpg" alt="" v-show="wallType=='image'">
                                    </el-col>
                                    <div class="textWall" v-show="wallType=='text'" :style="{'backgroundColor': TWallbgc1,'color': TWallbgc2}">
                                        <div class="textWall_content">
                                            <p>{{TWallContent}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="Publish_his">
                        <div class="pubTitle hisTitle">历史记录</div>
                        <el-row :gutter="15" class="his_row">
                            <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="6" class="his_col" v-for="(item,index) in 13" :key="index">
                                <div class="his_col_item pubFrame hoverShadow">
                                    <img src="../../assets/imgs/prop.jpg" alt="">
                                    <div class="his_col_item_desc">
                                        <div class="his_desc_text">发布时间：2019/09/04</div>
                                        <div class="his_desc_text">发布人：admin</div>
                                        <div class="his_desc_text">最后发布位置：展示屏1</div>
                                        <div class="btn">
                                            <el-dropdown split-button type="warning" @click="repush" @command="repushDir" trigger="click">
                                                重新推送
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item v-for="(item,index) in 2" :key="index" :command="index">{{'重新推送至展示屏' + (index + 1)}}</el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                            <el-button type="warning" @click="repushAll">推送所有</el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="设备列表" name="2">
                    <el-row :gutter="20" class="machine_list">
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item,index) in 15" :key="index">
                            <BlockList :title="'展示屏' + (index + 1)" :desc="'位置：学院一路'">
                                <div slot="content">
                                    <div class="line1">
                                        <span>展示屏状态</span>
                                        <span>电源控制</span>
                                    </div>
                                    <div class="line2">
                                        <span>
                                            <span class="state">正常</span>
                                        </span>
                                        <span>
                                            <el-switch
                                              v-model="switchData['key' + index]"
                                              active-color="#13ce66"
                                              inactive-color="#ff4949"
                                              active-text="开"
                                              inactive-text="关">
                                            </el-switch>
                                        </span>
                                    </div>
                                </div>
                            </BlockList>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
            <transition name="mask">
                <div class="mask" v-show="isShowMask">
                    <div class="mask_content" @click.stop>
                        <div class="title">
                            上传内容
                            <i class="el-icon-circle-close" @click="closeAlert"></i>
                        </div>
                        <div class="content">
                            <el-tabs tab-position="left">
                                <el-tab-pane label="上传图片">
                                    <div class="item_title">上传图片</div>
                                    <div class="item_content">
                                        <el-upload 
                                        class="upload-demo" 
                                        action="https://jsonplaceholder.typicode.com/posts/" 
                                        :limit="1" 
                                        :on-exceed="handleExceed" 
                                        :on-success="uploadImg" 
                                        :file-list="fileList">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                            <div slot="tip" class="el-upload__tip">请上传jpg/png文件</div>
                                            <div slot="file" slot-scope="{file}" class="uploaded_list">
                                                <img :src="file.url" alt="">
                                                <span class="upload_item_mask">
                                                    <span class="upload_item_mask_content">
                                                        <i class="el-icon-zoom-in" @click="handlePictureCardPreview(file)"></i>
                                                        <i class="el-icon-delete" @click="handleRemove(file)"></i>
                                                    </span>
                                                </span>
                                            </div>
                                        </el-upload>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="上传文字">
                                    <div class="item_title">上传文字</div>
                                    <div class="item_content">
                                        <Editor></Editor>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="上传视频">
                                    <div class="item_title">上传视频</div>
                                    <div class="item_content">
                                        <el-upload 
                                        class="upload-demo" 
                                        action="https://jsonplaceholder.typicode.com/posts/" 
                                        :limit="1" 
                                        :on-exceed="handleExceed" 
                                        :on-success="uploadImg" 
                                        :file-list="videoList">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                            <div slot="tip" class="el-upload__tip">请上传mp4/avg文件</div>
                                            <div slot="file" slot-scope="{file}" class="uploaded_list">
                                                <Video :videoSrc="file.url"></Video>
                                            </div>
                                        </el-upload>
                                        <div class="Video_delete">
                                        	<el-button size="small" type="danger" v-show="videoList.length>0" @click="handleRemoveVideo">删除当前视频</el-button>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>
                </div>
            </transition>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
    </div>
</template>
<script>
import Video from '@/components/Video.vue'
import BlockList from '@/components/BlockList.vue'
import Editor from '@/components/Editor.vue'

export default {
    components: {
        Video,
        BlockList,
    	Editor,
    },
    data() {
        return {
            activePage: '1',
            isShowMask: false,
            isShowLoadTxt: false,
            TWallContent: '',
            TWallbgc1: '#f00',
            TWallbgc2: '#fff',
            form: {
                bgc1: '#f00',
                bgc2: '#fff',
                desc: ''
            },
            wallType: 'image',

            isShowAlert: false,

            //初始化时存在的文件
            fileList: [{ id: 1,name: 'food.jpg', url: require('../../assets/imgs/prop.jpg') }],
            videoList: [{ id: 1,name: 'food.jpg', url: 'https://www.17sucai.com/preview/87827/2017-11-07/video1/video.mp4' }],
            dialogImageUrl: '',//图片预留地址
            dialogVisible: false, //是否显示图片预留层

            switchData: {}
        }
    },
    mounted() {
    },
    methods: {
        handleRemove(file) {
        	this.fileList = this.fileList.filter(item => {
        		return item.id != 1
        	})
        },
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
        uploadImg(response, file, fileList) {
            this.$message({
                type: 'success',
                message: '上传成功!'
            });
        },
        handleExceed() {
            this.$alert('文件个数超出限制', '提示', {
                confirmButtonText: '确定',
            });
        },
        uploadVideo(response, file, fileList) {

        },
        handleRemoveVideo() {
        	this.$confirm('是否删除当前视频?', '提示', {
        	    // type: 'warning'
        	}).then(() => {
        		this.videoList = this.videoList.filter(item => {
        			return item.id != 1
        		})
        	    this.$message({
        	        type: 'success',
        	        message: '删除成功!'
        	    });
        	}).catch(() => {
        	    this.$message({
        	        type: 'info',
        	        message: '已取消删除'
        	    });
        	});
        	
        },
        showAlert() {
            this.isShowMask = true
        },
        closeAlert() {
        	this.isShowMask = false
        },
        repush() {
            this.$confirm('是否将该条记录推送至展示屏1?', '重新推送', {
                // type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '推送成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消推送'
                });
            });
        },
        repushDir(command) {
            this.$confirm(`是否将该条记录推送至展示屏${command + 1}?`, '重新推送', {
                // type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '推送成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消推送'
                });
            });
        },
        repushAll() {
            this.$confirm(`是否将该条记录推送至所有展示屏?`, '重新推送', {
                // type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '推送成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消推送'
                });
            });
        },
    }
}
</script>
<style>
.Publish {
    background-color: #E9EEF3;
}

.Publish .Publish_header {
    background-color: #fff;
    height: 50px;
}

.Publish .Publish_content {
    padding: 20px;
}

.Publish .Publish_content .currentTitle {
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #E4E7ED;
    padding-left: 20px;
}

.Publish .Publish_content .currentTitle .btn {
    float: right;
    margin-right: 20px;
}

.Publish .Publish_content .Publish_his {
    background-color: #fff;
    margin-top: 20px;
}

.Publish .Publish_content .Publish_his .hisTitle {
    padding-left: 20px;
}

.Publish .Publish_content .Publish_his .his_row {
    padding: 0 20px;
}

.Publish .Publish_content .Publish_his .his_row .his_col_item {
    background-color: #fff;
    padding: 10px;
    box-shadow: 1px 1px 5px #888;
}

.Publish .Publish_content .Publish_his .his_row .his_col_item img {
    width: 40%;
    display: inline-block;
    vertical-align: middle;
}

.his_col_item_desc {
    width: 55%;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.his_col_item_desc .his_desc_text {
    font-size: 15px;
    color: #2a58ad;
}

.his_col_item_desc .btn {
    margin-top: 10px;
}

.his_col_item_desc .btn .el-button {
    padding: 8px 3px;
    font-size: 14px;
    vertical-align: middle;
}

.his_col_item_desc .btn .el-dropdown {
    padding: 8px 3px;
    font-size: 14px;
    vertical-align: middle;
    margin-right: 6px;
}

.his_col_item_desc .btn .lastBtn {
    margin-right: 6px;
}

/* 过渡时的样式和时间 */
.mask-enter-active,
.mask-leave-active {
    transition: all 0.5s;
}

/* 进入前/消失后的样式 */
.mask-enter,
.mask-leave-to {
    opacity: 0;
}

.Publish_content .mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
}

.Publish_content .mask:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.Publish_content .mask .mask_content {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    width: 846px;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.Publish_content .mask .mask_content .title {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    font-size: 17px;
    color: #fff;
    background-color: rgba(42, 88, 173, 1);
}

.Publish_content .mask .mask_content .content {
    background-color: #fff;
    padding: 20px 0;
}

.Publish_content .mask .mask_content .el-icon-circle-close {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 28px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}

.Publish_content .mask .mask_content .content .item_title {
    margin-left: 110px;
    margin-right: 10px;
    height: 30px;
    border-bottom: 1px solid #E4E7ED;
}

.Publish_content .mask .mask_content .content .item_content {
    margin-left: 110px;
    margin-right: 10px;
    padding: 10px 0;
    height: 382px;
}
.Publish_content .mask .mask_content .content .item_content .el-upload-list {
	width: 300px;
	margin: 0 auto;
	position: relative;
}
.Publish_content .mask .mask_content .content .item_content .uploaded_list {
	text-align: center;
	font-size: 0;
}
.Publish_content .mask .mask_content .content .item_content .uploaded_list img {
	width: 100%;
}
.Publish_content .mask .mask_content .content .item_content .uploaded_list .upload_item_mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0);
	
	opacity: 0;
	transition: .3s all;
	text-align: center;
}
.Publish_content .mask .mask_content .content .item_content .uploaded_list .upload_item_mask:hover {
	background: rgba(0,0,0,.5);
	opacity: 1;
}
.Publish_content .mask .mask_content .content .item_content .uploaded_list .upload_item_mask:after {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.Publish_content .mask .mask_content .content .item_content .uploaded_list .upload_item_mask .upload_item_mask_content {
	display: inline-block;
	vertical-align: middle;
	font-size: 20px;
	color: #fff;
}
.Publish_content .mask .mask_content .content .item_content .uploaded_list .upload_item_mask .upload_item_mask_content i {
	cursor: pointer;
	padding-left: 10px;
}
.Publish_content .mask .mask_content .content .item_content .Video_delete {
	padding: 10px 0;
	text-align: center;
}


.pubTitle {
    font-size: 16px;
    color: #204792;
    font-weight: 800;
}

.hisTitle {
    height: 40px;
    line-height: 40px;
}

.Publish_col_item {}

.pubFrame {
    border-radius: 3px;
    box-sizing: border-box;
    background-color: #fff;
}

.pubVideo {
    width: 100%;
    overflow: hidden;
    text-align: center;
    padding-bottom: 20px;
}

.pubVideo .pubVideo_img {
    margin-right: 50px;
}

.pubVideo .imgTitle {
    height: 40px;
    line-height: 40px;
    font-size: 17px;
    color: #204792;
}

.pubVideo img {
    width: 90%;
}

.pubUploal {
    width: 100%;
    height: 400px;
    display: table;
    background-color: #fff;
}

.pubVideo .textWall {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
}

.pubVideo .textWall:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.pubVideo .textWall .textWall_content {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    font-size: 20px;
    text-indent: 2em;
    overflow: hidden;
    text-align: left;
}

.Publish_content .el-tabs__content {
    overflow: visible;
}

.uploadBtn {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.uploadBtn_el_Btn {
    font-size: 16px;
    box-shadow: 1px 1px 5px #888;
}

.uploadBtn_el_uploal {
    margin-bottom: 20px;
}

.hoverShadow:hover {
    box-shadow: 1px 1px 8px #88bdf3;
}

.his_col {
    margin-bottom: 15px;
}
.Publish_content .machine_list .el-col {
    margin-bottom: 20px;
}
.Publish_content .machine_list .line1 > span,
.Publish_content .machine_list .line2 > span {
    display: inline-block;
    text-align: center;
    width: 50%;
}
.Publish_content .machine_list .line1 > span {
    height: 30px;
    line-height: 30px;
}
.Publish_content .machine_list .line2 > span {
    margin-top: 10px;
    margin-bottom: 25px;
}
.Publish_content .machine_list .line2 > span .state {
    background-color: #0f0;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    box-shadow: 1px 1px 2px #888;
}
.Publish_content .machine_list .line2 .el-switch__label.is-active {
    color: rgba(42, 88, 173,1);
    font-weight: 700;
}
</style>